<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="../templates/plantilla.xhtml">
	
	<ui:define name="head">::SCSN - Empleados</ui:define>
	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">Gestión de Empleados</h1>
		<br/>
		<br/>
		
		<div class="entry" style="line-height:200%">
			
			<h:form id="formTabla">
			
				<p:outputPanel id="tbEmpleado" >
					<p:dataTable id="empleados" value="#{serviciosVentanaEmpleado.empleadoDataModel}" var="empleado" 
                    				paginator="true" rows="5" paginatorPosition="bottom"
					                paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
					                rowsPerPageTemplate="5,10,15"
					                emptyMessage="No se encontraron resultados" selectionMode="single" 
									selection="#{serviciosVentanaEmpleado.empleadoSeleccionado}" onRowSelectUpdate=":formModificar:dataMod">
						
						<p:column filterBy="#{empleado.cedulaEmpleado}" filterMatchMode="contains">
							<f:facet name="header">
						        <h:outputText value="Cédula" />
						    </f:facet>
							<h:outputText value="#{empleado.cedulaEmpleado}" />
						</p:column>
						<p:column filterBy="#{empleado.nombre}" filterMatchMode="contains" >
							<f:facet name="header">
						        <h:outputText value="Nombre" />
						    </f:facet>
							<h:outputText value="#{empleado.nombre}" />
						</p:column>
						<p:column filterBy="#{empleado.apellido}" filterMatchMode="contains">
							<f:facet name="header">
						        <h:outputText value="Apellido" />
						    </f:facet>
							<h:outputText value="#{empleado.apellido}" />
						</p:column>
						<p:column>
							<f:facet name="header">
						        <h:outputText value="Dirección" />
						    </f:facet>
							<h:outputText value="#{empleado.direccion}" />
						</p:column>
						<p:column >
							<f:facet name="header">
						        <h:outputText value="Teléfono" />
						    </f:facet>
							<h:outputText value="#{empleado.telefono}" />
						</p:column>
						<p:column>
							<f:facet name="header">
						        <h:outputText value="Celular" />
						    </f:facet>
							<h:outputText value="#{empleado.celular}" />
						</p:column>
						<p:column>
							<f:facet name="header">
						        <h:outputText value="Correo" />
						    </f:facet>
							<h:outputText value="#{empleado.correo}" />
						</p:column>
						<p:column>
							<f:facet name="header">
						        <h:outputText value="Cargo" />
						    </f:facet>
							<h:outputText value="#{empleado.cargo.nombre}" />
						</p:column>
						
					</p:dataTable>
				</p:outputPanel>
			</h:form>
<!-- ······················································· BOTONERA ··············································· -->			
			<h:form id="formBotonera">
				<p:commandButton id="btnNuevo" image="ui-icon-plusthick" onclick="ventanaRegistro.show()" update=":formNuevo:data" value="Nuevo"/>
				<p:commandButton id="btnModificar" image="ui-icon-wrench" action="#{serviciosVentanaEmpleado.activarModificar}" update=":formModificar:dataMod" oncomplete="handleRequest(xhr, status, args);" value="Modificar" />
				<p:commandButton id="btnEliminar" image="ui-icon-trash" action="#{serviciosVentanaEmpleado.activarEliminar}" update=":formEliminar:eliminar" oncomplete="handleRequest(xhr, status, args);" value="Eliminar"/>
				<p:commandButton id="btnConsultar" image="ui-icon-search" action="#{serviciosVentanaEmpleado.activarConsultar}" update=":formConsulta:dataConsulta" oncomplete="handleRequest(xhr, status, args);" value="Consultar"/>
			</h:form>
			
			<script type="text/javascript">
		        function handleRequest(xhr, status, args) {
		            if (args.ok) {
		            	switch (args.tarea) {
							case "M":
								ventanaModificar.show();
								break;
							case "E":
				                confirmacion.show();
								break;
							case "C":
								ventanaConsulta.show();
								break;
						}
		            }else{
		                errorSeleccion.show();
		            }
		        }
		    </script>
		    
		   	<p:confirmDialog message="Debe seleccionar un elemento" header="Operaciòn Negada" severity="alert" widgetVar="errorSeleccion"
							showEffect="fade" hideEffect="blind" modal="true" closable="false">
		   		<h:form>
		   			<p:commandButton id="aceptar" image="ui-icon-check" onclick="errorSeleccion.hide();" value="Aceptar" type="buttom"/>
		   		</h:form>
		   	</p:confirmDialog>
<!-- ······················································· VENTANAS EMERGENTES ······················································· -->

<!-- ººººººººººººººººººººººººººººº NUEVO ººººººººººººººººººººººººººººº -->
			<h:form id="formNuevo">
				<script type="text/javascript">
						function refrescarNuevo() {
							document.getElementById("formTabla").reset();
							document.getElementById("formNuevo").reset();
						}
				</script>
				
				<p:growl id="mensajes" showDetail="true" life="4000"/>
				
				<p:dialog widgetVar="ventanaRegistro" header="Registro de Empleados"
						  showEffect="fade" hideEffect="fade" closable="false">
			       <h:panelGrid id="grid" columns="3">
				   		<h:outputLabel value="Cédula: *" for="cedula"/>
				   		<h:inputText id="cedula" value="#{serviciosVentanaEmpleado.empleado.cedulaEmpleado}" label="Cedula:" required="true"/>
				   		<p:message for="cedula"/>
				   		
				   		<h:outputLabel value="Nombre: *" for="nombre"/>
				   		<h:inputText id="nombre" value="#{serviciosVentanaEmpleado.empleado.nombre}" label="Nombre:" required="true"/>
				   		<p:message for="nombre"/>
				   		
				   		<h:outputLabel value="Apellido: *" for="apellido"/>
				   		<h:inputText id="apellido" value="#{serviciosVentanaEmpleado.empleado.apellido}" label="Apellido:" required="true"/>
				   		<p:message for="apellido"/>
				   		
				   		<h:outputLabel value="Direccion: *" for="direccion"/>
				   		<h:inputTextarea id="direccion" value="#{serviciosVentanaEmpleado.empleado.direccion}" label="Direccion:" required="true"/>
				   		<!--<p:message for="direccion"/>-->
				   		
				   		<h:outputLabel value="Teléfono:" for="telefono"/>
				   		<p:inputMask  id="telefono" value="#{serviciosVentanaEmpleado.empleado.telefono}" mask="(999) 999-9999"></p:inputMask>
				   		<!--<p:message for="telefono"/>-->
				   		
				   		<h:outputLabel value="Celular: *" for="celular"/>
				   		<p:inputMask  id="celular" value="#{serviciosVentanaEmpleado.empleado.celular}" mask="(999) 999-9999" required="true"></p:inputMask>
				   		<!--<p:message for="celular"/>-->
				   		
				   		<h:outputLabel value="Email:" for="email"/>
				   		<h:inputText id="email" value="#{serviciosVentanaEmpleado.empleado.correo}" label="Email:"/>
				   		<!--<p:message for="email"/>-->
				   		
				   		<h:outputLabel value="Empresa: *" for="empresa"/>
						<h:inputText id="empresa" label="Empresa:"/>
						<!--<p:message for="empresa"/>-->
						
						<h:outputLabel value="Cargo: *" for="cargo"/>
			     		<h:selectOneMenu id="cargo" label="Cargo: ">
			     			<f:selectItem itemLabel="-Seleccione-" itemValue=""/>
			     			<f:selectItems value="#{serviciosVentanaEmpleado.listaCargos}" var="cargo" itemLabel="#{cargo.nombre}" itemValue="#{cargo}"/>
			     		</h:selectOneMenu>
				       	<p:commandButton value="Nuevo Cargo" onclick="ventanaNuevoCargo.show();" image="ui-icon-plusthick"/>
				       	
				   		<!--<p:message for="cargo"/>-->
					</h:panelGrid>
					<p:separator/>					
		       		<p:commandButton value="Aceptar"
		       						 actionListener="#{serviciosVentanaEmpleado.guardarEmpleado}" 
		       						 image="ui-icon-disk" oncomplete="refrescarNuevo();">
	       				<p:ajax process="@form"
	       						update="mensajes"/>
			        </p:commandButton> 
					<p:commandButton value="Cancelar"
									 actionListener="#{serviciosVentanaEmpleado.cancelar}" oncomplete="refrescarNuevo(); ventanaRegistro.hide();"
									 image="ui-icon-closethick" style="margin-left:5px">
	       				<p:ajax process="@this cedula nombre apellido direccion celular telefono email cargo empresa" 
	       						update=":formTabla:tbEmpleado,grid"/>
			        </p:commandButton> 
		   			<p:commandButton value="Limpiar" type="reset" update="grid"
		   							 style="margin-left:5px" image="ui-icon-refresh"/>
				</p:dialog>
			</h:form>
			
<!-- ººººººººººººººººººººººººººººººººººººººº MODIFICAR ººººººººººººººººººººººººººººº -->
			<h:form id="formModificar">
				<script type="text/javascript">
						function refrescarMod() {
							document.getElementById("formTabla").reset();
							document.getElementById("formModificar").reset();
						}
				</script>
				
				<p:growl id="mensajesMod" showDetail="true" life="4000"/>
				
				<p:dialog widgetVar="ventanaModificar" header="Modificar Datos del Empleado"
							showEffect="fade" hideEffect="fade" closable="false">
					<h:panelGrid id="dataMod" columns="3">
				   		<h:outputLabel value="Cédula: *" for="cedulaMod"/>
				   		<h:inputText id="cedulaMod" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.cedulaEmpleado}" label="Cedula:" required="true" disabled="true"/>
				   		<p:message for="cedulaMod"/>
				   		
				   		<h:outputLabel value="Nombre: *" for="nombreMod"/>
				   		<h:inputText id="nombreMod" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.nombre}" label="Nombre:" required="true"/>
				   		<p:message for="nombreMod"/>
				   		
				   		<h:outputLabel value="Apellido: *" for="apellidoMod"/>
				   		<h:inputText id="apellidoMod" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.apellido}" label="Apellido:" required="true"/>
				   		<p:message for="apellidoMod"/>
				   		
				   		<h:outputLabel value="Direccion: *" for="direccionMod"/>
				   		<h:inputTextarea id="direccionMod" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.direccion}" label="Direccion:" required="true"/>
				   		<p:message for="direccionMod"/>
				   		
				   		<h:outputLabel value="Teléfono:" for="telefonoMod"/>
				   		<p:inputMask  id="telefonoMod" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.telefono}" mask="(999) 999-9999"></p:inputMask>
				   		<p:message for="telefonoMod"/>
				   		
				   		<h:outputLabel value="Celular: *" for="celularMod"/>
				   		<p:inputMask  id="celularMod" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.celular}" mask="(999) 999-9999" required="true"></p:inputMask>
				   		<p:message for="celularMod"/>
				   		
				   		<h:outputLabel value="Email:" for="emailMod"/>
				   		<h:inputText id="emailMod" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.correo}" label="Email:"/>
				   		<p:message for="emailMod"/>
				   		
				   		<h:outputLabel value="Empresa: *" for="empresaMod"/>
						<h:inputText value="#{serviciosVentanaEmpleado.empleadoSeleccionado.empresa.nombre}" id="empresaMod" label="Empresa:" disabled="true" required="true"/>
						<p:message for="empresaMod"/>
						
						<h:outputLabel value="Cargo: *" for="cargoMod"/>
			     		<h:selectOneMenu id="cargoMod" label="Cargo: ">
			     			<f:selectItem itemLabel="-Seleccione-" itemValue=""/>
			     			<f:selectItems value="#{serviciosVentanaEmpleado.listaCargos}" var="cargo" itemLabel="#{cargo.nombre}" itemValue="#{cargo}"/>
			     		</h:selectOneMenu>
				       	<p:commandButton value="Nuevo Cargo" onclick="ventanaNuevoCargo.show();" image="ui-icon-plusthick"/>
				   		
				   		<p:message for="cargoMod"/>
				   		
			       </h:panelGrid>  
			 
			       <p:separator />
		       		<p:commandButton value="Aceptar"
		       						 actionListener="#{serviciosVentanaEmpleado.guardarEmpleado}" 
		       						 image="ui-icon-disk" oncomplete="refrescarMod(); ventanaModificar.hide();">
	       				<p:ajax process="@all"
	       						update=":formTabla:tbEmpleado,mensajesMod"/>
			        </p:commandButton>
					<p:commandButton value="Cancelar"
									 actionListener="#{serviciosVentanaEmpleado.cancelar}" oncomplete="refrescarMod(); ventanaModificar.hide();"
									 image="ui-icon-closethick" style="margin-left:5px">
	       				<p:ajax process="@this cedulaMod nombreMod apellidoMod direccionMod celularMod telefonoMod emailMod cargoMod empresaMod" 
	       						update=":formTabla:tbEmpleado,dataMod"/>
			        </p:commandButton>
				</p:dialog>
			</h:form>
			
<!-- ººººººººººººººººººººººººººººººººººººººº ELIMINAR ººººººººººººººººººººººººººººº -->

			<p:growl id="mensajeEliminar" showDetail="true" globalOnly="true" life="4000"/>
			
			<p:confirmDialog id="ventanaEliminar" message="Está seguro que desea eliminar este empleado?"  
		               		header="Confirme la operación" severity="alert" widgetVar="confirmacion"
							showEffect="fade" hideEffect="blind" modal="true" closable="false">  
		       <h:form id="formEliminar">
					<script type="text/javascript">
							function refrescarEliminar() {
								document.getElementById("formTabla").reset();
								document.getElementById("formEliminar").reset();
							}
					</script>
			       <h:panelGrid id="eliminar" columns="2"> 
				        <p:commandButton id="confirmar" value="Aceptar" actionListener="#{serviciosVentanaEmpleado.eliminarEmpleado}"
				        				 image="ui-icon-check" oncomplete="refrescarEliminar(); confirmacion.hide();" update=":formTabla:tbEmpleado,:mensajeEliminar"/>  
				        <p:commandButton id="rechazar" image="ui-icon-closethick" value="Cancelar" update=":formTabla:tbEmpleado"
				        				 actionListener="#{serviciosVentanaEmpleado.cancelar}" oncomplete="confirmacion.hide();"/>  
			       </h:panelGrid>
			   </h:form>
		   	</p:confirmDialog>
		   	
<!-- ººººººººººººººººººººººººººººººººººººººº CONSULTA ººººººººººººººººººººººººººººº -->
			
			<h:form id="formConsulta">
				<p:dialog widgetVar="ventanaConsulta" header="Consultar Empleado"
					showEffect="fade" hideEffect="fade" closable="false">
	       	
			       <h:panelGrid id="dataConsulta" columns="2">
				   		<h:outputLabel value="Cédula: " for="cedulaConsulta"/>
				   		<h:outputText id="cedulaConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.cedulaEmpleado}"/>
				   		
				   		<h:outputLabel value="Nombre: " for="nombreConsulta"/>
				   		<h:outputText id="nombreConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.nombre}"/>
				   		
				   		<h:outputLabel value="Apellido: " for="apellidoConsulta"/>
				   		<h:outputText id="apellidoConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.apellido}" />
				   		
				   		<h:outputLabel value="Direccion: " for="direccionConsulta"/>
				   		<h:inputTextarea id="direccionConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.direccion}" label="Direccion:" disabled="true"/>
				   		
				   		<h:outputLabel value="Teléfono:" for="telefonoConsulta"/>
				   		<h:outputText  id="telefonoConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.telefono}"></h:outputText>
				   		
				   		<h:outputLabel value="Celular: " for="celularConsulta"/>
				   		<h:outputText  id="celularConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.celular}"></h:outputText>
				   		
				   		<h:outputLabel value="Email:" for="emailConsulta"/>
				   		<h:outputText id="emailConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.correo}"/>
				   		
				   		<h:outputLabel value="Empresa: " for="empresaConsulta"/>
						<h:outputText id="empresaConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.empresa.nombre}"/>
						
						<h:outputLabel value="Cargo: " for="cargoConsulta"/>
			     		<h:outputText id="cargoConsulta" value="#{serviciosVentanaEmpleado.empleadoSeleccionado.cargo.nombre}"/>
			     		
					</h:panelGrid>
					<p:separator/>
	     			<p:commandButton value="Aceptar" onclick="ventanaConsulta.hide();"
									 image="ui-icon-check" update=":formTabla:tbEmpleado"/>
				</p:dialog>
			</h:form>
			
			<!-- VENTANAS PARA EL REGISTRO EMERGENTE DE CARGOS -->
			
			<h:form id="formNuevoCargo">
				<p:dialog widgetVar="ventanaNuevoCargo" header="Registrar Nuevo Cargo" modal="true"
	         			showEffect="explode" hideEffect="explode" closable="false">
	         	<h:panelGrid columns="3">
	         		<h:outputLabel value="Nombre: *" for="nombreCargo"/>
	         		<h:inputText id="nombreCargo" value="#{cargo.nombre}" required="true" label="Nombre:"/>
	         		<p:message for="nombreCargo"/>
	         		
	         		<h:outputLabel value="Descripción: " for="descripcionCargo"/>
	         		<h:inputTextarea id="descripcionCargo" value="#{cargo.descripcion}" label="Descripción: "/>
	         		<p:message for="descripcionCargo"/>
	         		 
	         		<p:commandButton value="Registrar" type="reset" onclick="ventanaNuevoCargo.hide();"/>
	         		<p:commandButton value="Cancelar" type="reset" onclick="ventanaNuevoCargo.hide();"/>
	         		<p:commandButton value="Limpiar" type="reset"/>
	         	</h:panelGrid>
	         </p:dialog>
			</h:form>
		</div>
		
		<div id="menuAbajo">
			<ul id="link">
	            <li><a href="cargos.xhtml" class="cargos"><span>Cargos</span></a></li>
	      </ul>
		</div>
		
		
	</ui:define>
</ui:composition>